// pages/my/market.js
import * as echarts from '../../ec-canvas/echarts'
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: ''
  },
  tooltip: {
      trigger: 'axis'
  },
  legend: {
      data: ['大米', '木耳', '小麦', '玉米', '大豆']
  },
  grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
  },
  toolbox: {
      feature: {
          saveAsImage: {}
      }
  },
  xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
      type: 'value'
  },
  series: [
      {
          name: '大米',
          type: 'line',
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
          name: '木耳',
          type: 'line',
          stack: '总量',
          data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
          name: '小麦',
          type: 'line',
          stack: '总量',
          data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
          name: '玉米',
          type: 'line',
          stack: '总量',
          data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
          name: '大豆',
          type: 'line',
          stack: '总量',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
  ]
    
  };
  chart.setOption(option);
  return chart;
};
function initBarChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    title: {
      subtext: '数据来自网络'
  },
  tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'shadow'
      }
  },
  legend: {
      data: ['2021年', '2020年']
  },
  grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
  },
  xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
  },
  yAxis: {
      type: 'category',
      data: ['后期价格', '走货速度', '客商积极性', '货源情况', '上市情况']
  },
  series: [
      {
          name: '2021年',
          type: 'bar',
           data: [18203, 23489, 29034, 104970, 131744, 630230]
      },
      {
          name: '2020年',
          type: 'bar',
           data: [19325, 23438, 31000, 121594, 134141, 681807]
      }
  ],
  dataZoom:{
    realtime:true, //拖动滚动条时是否动态的更新图表数据
    height:0,//滚动条高度
    start:0,//滚动条开始位置（共100等份）
    end:65//结束位置（共100等份）
 }  

  };
  chart.setOption(option);
  return chart;
}



Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: initChart
    },
    ecBar: {
      onInit: initBarChart,
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})